<template>
  <el-drawer v-model="drawer" class="drawer-layout" size="400px" :title="title" direction="rtl"
    :before-close="handleClose" :close-on-click-modal="false">
    <div class="info-container">
      <div class="info-container_body">
        <div class="form-section">
          <el-form ref="refFrom" label-position="top" :model="form.model">
            <AgelFormGrid :items="form.items" :span="24" :gutter="16">
              <template #slot-vendor>
                <vendor-select multiple v-model="form.model.vendorIds"></vendor-select>
              </template>
            </AgelFormGrid>
          </el-form>
        </div>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </div>

  </el-drawer>
</template>

<script setup name="RecordAdd" lang="ts">
import { addLeak, updateLeak } from '@/api/station/leak/index';
import { BizStationLeakDetectVo, BizStationLeakSummaryVo } from '@/api/station/leak/types';
import VendorSelect from '@/views/common/vendor-select/index.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { leak_plan_type } = toRefs<any>(proxy?.useDict('leak_plan_type'));
const defaultModel = (): BizStationLeakDetectVo => ({
  settleId: undefined,
  stationId: '',
  stationName: '',
  startFrom: '',
  endTo: '',
  meterReadingPrevious: '',
  meterReadingCurrent: '',
  amount: '',
})
const drawer = ref(false)
const title = ref('新增电量')
const isEdit = ref(false)
const form = reactive({
  model: defaultModel(),
  items: [
    { prop: "stationName", label: "站房名称", required: true, attrs: { disabled: true } },
    { prop: "vendorIds", label: "酒店名称", slot: 'slot-vendor', },
    {
      prop: "planType", label: "监测方式", required: true, slot: 'agel-select',
      attrs: {
        options: leak_plan_type
      }
    },
    { prop: "rangeTime", label: "监测时间", required: true, slot: 'el-date-picker', attrs: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }, },// 当前读书
  ],
})
const loading = ref(false)
const refFrom = ref<ElFormInstance>()
const emits = defineEmits(['close', 'success'])


const open = (row: BizStationLeakSummaryVo) => {
  title.value = '泄漏监测'
  form.model.stationId = row.stationId
  form.model.stationName = row.stationName
  isEdit.value = false
  drawer.value = true
}
const openEdit = (row: BizStationLeakDetectVo) => {
  title.value = '修改泄漏监测'
  isEdit.value = true
  form.model = row
  drawer.value = true
}

/** 取消 */
const handleClose = () => {
  drawer.value = false
  emits('close')
}
/** 确认 */
const handleSubmit = async () => {
  if (!refFrom.value) return
  refFrom.value.validate((valid, fields) => {
    if (valid) {
      handleRequest()
    } else {
      console.log('error submit!', fields)
    }
  })
}
const handleRequest = async () => {
  loading.value = true
  let serviceMethod = isEdit.value ? updateLeak : addLeak
  let res = await serviceMethod(form.model as StationEnergyRecord)
  loading.value = false
  if (res.code == 200) {
    proxy?.$modal.msgSuccess('操作成功！')
    emits('success')
  } else {
    proxy?.$modal.msgError(res.msg || '操作失败！')
  }
}
defineExpose({ open, openEdit })
</script>
